<script setup>

import {reactive, ref} from "vue";
import {jsonPost} from "@/net";
import {ElMessage} from "element-plus";
import router from "@/router";

const form = reactive({
    name: '',
    info: '',
    start_time: '',
    end_time: '',
})

const rules = {
    name: [
        {required: true, message: '请输入比赛名称！', trigger: 'blur'}
    ],
    info: [
        {required: true, message: '请输入简介！', trigger: 'blur'}
    ],
    start_time: [
        {required: true, message: '请输入开始时间！', trigger: 'blur'}
    ],
    end_time: [
        {required: true, message: '请输入结束时间', trigger: 'blur'}
    ]
}

const startTime = ref('')
const endTime = ref('')
const formRef = ref()
const isEmailValid = ref(false)

const onValidate = (prop, isValid) => {
    if (prop === 'info') {
        isEmailValid.value = isValid
    }
}

const resetForm = (formRef) => {
    if (!formRef) return;
    formRef.resetFields();
}

const addGame = () => {
    formRef.value.validate((isValid) => {
        if (isValid) {
            console.log(form.singers)
            jsonPost('api/game/add-step-one', {
                name: form.name,
                info: form.info,
                start_time: form.start_time,
                end_time: form.end_time,
            }, (message) => {
                ElMessage.success(message)
                router.push('/index/game')
            }, (message) => {
                ElMessage.warning(message)
            })
        } else {
            ElMessage.warning('请完整填写比赛信息！')
        }
    })
}

</script>

<template>
    <div style="margin: 20px;">
        <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                @validate="onValidate"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
        >
            <el-form-item label="比赛名称" prop="name">
                <el-input v-model="form.name" style="width: 100px;"/>
            </el-form-item>
            <el-form-item label="比赛简介" prop="info">
                <el-input v-model="form.info"
                          type="textarea"
                          style="width: 700px;"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          maxlength="1000"
                          show-word-limit
                />
            </el-form-item>
            <el-form-item label="比赛时间" prop="start_time">
                <div class="demo-time-range">
                    <el-time-select
                            v-model="form.start_time"
                            :max-time="endTime"
                            class="mr-4"
                            placeholder="开始时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                    />
                    <el-time-select
                            v-model="form.end_time"
                            :min-time="startTime"
                            placeholder="结束时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                    />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addGame">
                    提交
                </el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>

</style>